.input {
  &:global(.pressed)::placeholder {
    color: var(--theme-text-primary);
  }
}

.field {
  &:hover {
    box-shadow: inset 0.125rem 0 0 0 var(--theme-text-primary);
  }

  &:global(.focused.readOnly) {
    box-shadow: inset 0.125rem 0 0 0 var(--theme-accent-blueCheese-default);
    border-color: var(--theme-accent-blueCheese-default);
  }

  &:global(.focused) {
    box-shadow: inset 0.125rem 0 0 0 var(--theme-text-primary);
    border-color: var(--theme-text-primary);
  }

  &:global(.invalid) {
    box-shadow: inset 0.125rem 0 0 0 var(--status-error);
  }

   &:global(.password-0), &:global(.password-1) {
      box-shadow: inset 0.125rem 0 0 0 var(--status-error);
      &:before {
         content: '';
         border-radius: 14px 0px 0px 14px;
         opacity: 0.24;
         background: linear-gradient(270deg, rgba(252, 83, 141, 0) 0%, rgba(252, 83, 141, 1) 100%);
         width: 44px;
         height: 100%;
         position: absolute;
         left: 0;
         top: 0;
       }
    }
  &:global(.password-2) {
     box-shadow: inset 0.125rem 0 0 0 var(--status-warning);
    &:before {
         content: '';
         border-radius: 14px 0px 0px 14px;
         opacity: 0.24;
         background: linear-gradient(270deg, rgba(255, 142, 59, 0) 0%, rgba(255, 142, 59, 1) 100%);
         width: 44px;
         height: 100%;
         position: absolute;
         left: 0;
         top: 0;
     }
   }
  &:global(.password-3) {
     box-shadow: inset 0.125rem 0 0 0 var(--status-success);
      &:before {
         content: '';
         border-radius: 14px 0px 0px 14px;
         opacity: 0.24;
         background: linear-gradient(270deg, rgba(57, 229, 140, 0) 0%, rgba(107, 244, 192, 1) 100%);
         width: 44px;
         height: 100%;
         position: absolute;
         left: 0;
         top: 0;
       }
   }
}

.field input[type='number']::-webkit-inner-spin-button,
.field input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
